/*条形图
-----------------------------------------------
需要插入显示图形统计图的容器div为：<div id="memberlistGraph"></div>
------------------------------------------------
调用方法
gateMonitorGraphOne(x, y1, yList);
gateMonitorGraphTwo(x, y1, y2, yList);
gateMonitorGraphThree(x, y1, y2, y3, yList);
gateMonitorGraphFour(x, y1, y2, y3, y4, yList);

-------------------------------------------------
函数变量：

x 坐标轴名称
y1、y2··· 数据
yList 对应y1、y2数据名称

--------------------------------------------
实例：
  var name = ['福州市中小学校图书馆（室）管理平台', '宁德市中小学校图书馆（室）管理平台', '莆田市中小学图书馆（室）管理平台', '福州市中小学校图书馆（室）管理平台', '宁德市中小学校图书馆（室）管理平台', '莆田市中小学图书馆（室）管理平台'];
  var ydata1 = ['735876', '2273131', '2872422', '735876', '2273131', '2872422'];
  var ydata2 = ['735876', '2273131', '2872422', '735876', '2273131', '2872422'];
  var yname = ['馆藏数', '读者'];
  gateMonitorGraphTwo(name, ydata1, ydata2, yname);

*/

/*饼图
-----------------------------------------------
需要插入显示图形统计图的容器div为：<div id="memberlistGraph"></div>
------------------------------------------------
函数调用方法：
gateMonitorpieGraph(yList, data);

-------------------------------------------------
函数变量：
name 报表名称
yList 数据名称
data 数据，数据格式[{value: number,name: 'DataName'},{value: number,name: 'DataName'}]

--------------------------------------------
实例：
  var name = '进出馆情况';
  var yList = ['今日进馆人数', '今日出馆人数', '当前在馆人数'];
  var data = [{value: 335,name: '今日进馆人数'}, {value: 310,name: '今日出馆人数'}, {value: 810,name: '当前在馆人数'}];
  gateMonitorpieGraph(name, yList, data);

*/


/*
折线图
-----------------------------------------------
需要插入显示图形统计图的容器div为：<div id="memberlistGraph"></div>
------------------------------------------------
函数调用方法：
gateMonitorlinechart(name, x, ydata);

-------------------------------------------------
函数变量：
name 报表名称
x 坐标名称
ydata数据

--------------------------------------------
实例：
  var name = '本周到馆折线图';
  var x = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; //坐标名
  var ydata = ['731', '689', '142', '352', '689', '0', '0']; //坐标数据
  gateMonitorlinechart(name, x, ydata) //函数调用传参

*/

/* 测试用例 */
$(function () {
  var name = ['A类', 'B类', 'C类', 'D类', 'E类']; //显示在x轴上的名称
  var ydata1 = ['121', '1234', '2231', '901', '1234'];
  var ydata2 = ['11', '268', '129', '28', '2234'];
  var yname = ['藏书册书', '借书册数']; //对应ydata1这组数据的名称
  gateMonitorGraphTwo(name, ydata1, ydata2, yname);
})


/* 柱状图 */

/* 一项 */
function gateMonitorGraphOne(x, y1, yList) {
  // 基于准备好的dom，初始化echarts实例
  //  var myChart = echarts.init(document.getElementById('gateMonitorGraph'));
  var myChart = echarts.getInstanceByDom(document.getElementById('gateMonitorGraph'));
  if (myChart === undefined) {
    var myChart = echarts.init(document.getElementById('gateMonitorGraph'));
  }

  // 指定图表的配置项和数据
  var option = {
    //color: ['#bcdff5', '#f6c745'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line'
      },
      textStyle: {
        fontSize: 20
      }
    },
    legend: {
      data: yList,
      textStyle: {
        fontSize: 20
      }
    },
    grid: {
      left: 0,
      right: '4%',
      bottom: '30px',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: x,
        axisTick: {
          alignWithLabel: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            //fontSize: 10
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        //position: 'top'
        }
    ],
    itemStyle: {
      normal: {
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowBlur: 2,
        barBorderRadius: 3
      }
    },
    label: {
      normal: {
        show: true,
        position: 'top',
        textStyle: {
          fontSize: 20,
          color: '#000'
        }
      }
    },
    series: [
      {
        name: yList[0],
        type: 'bar',
        barWidth: '50%',
        data: y1,
        barGap: 0.01,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(27, 115,153, 1)'
                    }, {
              offset: 1,
              color: 'rgba(86, 178,211, 1)'
                    }]),
          }
        }
        }
    ],
    animation: false
  };
  myChart.setOption(option);
}
/* 两项Y轴函数 */
function gateMonitorGraphTwo(x, y1, y2, yList) {
  // 基于准备好的dom，初始化echarts实例
  //  var myChart = echarts.init(document.getElementById('gateMonitorGraph'));
  var myChart = echarts.getInstanceByDom(document.getElementById('gateMonitorGraph'));
  if (myChart === undefined) {
    var myChart = echarts.init(document.getElementById('gateMonitorGraph'));
  }
  // 指定图表的配置项和数据
  var option = {
    //color: ['#bcdff5', '#f6c745'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line'
      },
      textStyle: {
        fontSize: 20
      }
    },
    legend: {
      data: yList,
      textStyle: {
        fontSize: 20
      }
    },
    grid: {
      left: 0,
      right: '4%',
      bottom: '30px',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: x,
        axisTick: {
          alignWithLabel: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            //fontSize: 20
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        position: 'top'
        }
    ],
    itemStyle: {
      normal: {
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowBlur: 2,
        barBorderRadius: 3
      }
    },
    label: {
      normal: {
        show: true,
        position: 'top',
        textStyle: {
          fontSize: 20,
          color: '#000'
        }
      }
    },
    series: [
      {
        name: yList[0],
        type: 'bar',
        barWidth: '30%',
        data: y1,
        //barGap: 0.01,
        //barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(27, 115,153, 1)'
                    }, {
              offset: 1,
              color: 'rgba(86, 178,211, 1)'
                    }]),
          }
        }
        },
      {
        name: yList[1],
        type: 'bar',
        barWidth: '30%',
        data: y2,

        //barGap: 0.01,
        //barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(187, 84,17, 1)'
                    }, {
              offset: 1,
              color: 'rgba(241, 172,53, 1)'
                    }]),
          }
        }
        }
    ],
    animation: false
  };
  myChart.setOption(option);
}

/* 三项Y轴函数 */
function gateMonitorGraphThree(x, y1, y2, y3, yList) {
  // 基于准备好的dom，初始化echarts实例

  var myChart = echarts.getInstanceByDom(document.getElementById('gateMonitorGraph'));
  if (myChart === undefined) {
    var myChart = echarts.init(document.getElementById('gateMonitorGraph'));
  }

  // 指定图表的配置项和数据
  var option = {
    //color: ['#3398DB','#00ff00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line'
      },
      textStyle: {
        fontSize: 20
      }
    },
    legend: {
      data: yList,
      textStyle: {
        fontSize: 20
      }
    },
    grid: {
      left: 0,
      right: '4%',
      bottom: '30px',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: x,
        axisTick: {
          alignWithLabel: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            //fontSize: 20
          }
        }
      }
    ],
    yAxis: [
      {
        //show:false,
        type: 'value',
        position: 'top'
        }
    ],
    itemStyle: {
      normal: {
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowBlur: 2,
        barBorderRadius: 3
      }
    },
    label: {
      normal: {
        show: true,
        position: 'top',
        textStyle: {
          fontSize: 18,
          color: '#000'
        }
      }
    },
    series: [
      {
        name: yList[0],
        type: 'bar',
        barWidth: '20%',
        data: y1,
        //barGap: 0.1,
        //barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(27, 115,153, 1)'
                    }, {
              offset: 1,
              color: 'rgba(86, 178,211, 1)'
                    }]),
          }
        }
        },
      {
        name: yList[1],
        type: 'bar',
        barWidth: '20%',
        data: y2,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(187, 84,17, 1)'
                    }, {
              offset: 1,
              color: 'rgba(241, 172,53, 1)'
                    }]),
          }
        }
        },
      {
        name: yList[2],
        type: 'bar',
        barWidth: '20%',
        data: y3,
        //barGap: 0.1,
        //barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(36, 146,21, 1)'
                    }, {
              offset: 1,
              color: 'rgba(179, 222,133, 1)'
                    }]),
          }
        }
        }
    ],
    animation: false
  };
  myChart.setOption(option);
}

/* 四项Y轴函数 */
function gateMonitorGraphFour(x, y1, y2, y3, y4, yList) {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.getInstanceByDom(document.getElementById('gateMonitorGraph'));
  if (myChart === undefined) {
    var myChart = echarts.init(document.getElementById('gateMonitorGraph'));
  }

  // 指定图表的配置项和数据
  var option = {
    //color: ['#3398DB','#00ff00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line'
      },
      textStyle: {
        fontSize: 20
      }
    },
    legend: {
      data: yList,
      textStyle: {
        fontSize: 20
      }
    },
    grid: {
      left: 0,
      right: '4%',
      bottom: '30px',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: x,
        axisTick: {
          alignWithLabel: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            //fontSize: 20
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        position: 'top'
        }
    ],
    itemStyle: {
      normal: {
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowBlur: 2,
        barBorderRadius: 3
      }
    },
    label: {
      normal: {
        show: true,
        position: 'top',
        textStyle: {
          fontSize: 15,
          color: '#000'
        }
      }
    },
    series: [
      {
        name: yList[0],
        type: 'bar',
        barWidth: '20%',
        data: y1,
        //barGap: 0.1,
        //barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(27, 115,153, 1)'
                    }, {
              offset: 1,
              color: 'rgba(86, 178,211, 1)'
                    }]),
          }
        }
        },
      {
        name: yList[1],
        type: 'bar',
        barWidth: '20%',
        data: y2,
        //barGap: 0.1,
        //barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(187, 84,17, 1)'
                    }, {
              offset: 1,
              color: 'rgba(241, 172,53, 1)'
                    }]),
          }
        }
        },
      {
        name: yList[2],
        type: 'bar',
        barWidth: '20%',
        data: y3,
        //barGap: 0.1,
        //barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(36, 146,21, 1)'
                    }, {
              offset: 1,
              color: 'rgba(179, 222,133, 1)'
                    }]),
          }
        }
        },
      {
        name: yList[3],
        type: 'bar',
        barWidth: '20%',
        data: y4,
        //barGap: 0.1,
        //barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgba(197, 29,29, 1)'
                    }, {
              offset: 1,
              color: 'rgba(231, 126,126, 1)'
                    }]),
          }
        }
        }
    ],
    animation: false
  };
  myChart.setOption(option);
}


/* 饼图 */
function gateMonitorpieGraph(name, yList, data) {
  var myChart = echarts.getInstanceByDom(document.getElementById('gateMonitorGraph'));
  if (myChart === undefined) {
    var myChart = echarts.init(document.getElementById('gateMonitorGraph'));
  }
  var option = {
    title: {
      text: name,
      x: 'center',
      textStyle: {
        fontSize: 20,
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b} : {c} ({d}%)",
      textStyle: {
        fontSize: 30,
      }
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      backgroundColor: 'white',
      data: data,
      textStyle: {
        fontSize: 30,
      }
    },
    series: [
      {
        //name: title,
        type: 'pie',
        radius: ['40%', '70%'],
        startAngle: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
              offset: 0,
              color: 'red'
                    }, {
              offset: 1,
              color: 'blue'
                    }]),
          }
        },
        label: {
          normal: {
            formatter: "{b} : {c} ({d}%)",
            textStyle: {
              fontSize: 30,
            }
          }
        },
        data: data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
        }
    ],
    animation: false
  };
  myChart.setOption(option);
}

/* 折线图 */

function gateMonitorlinechart(name, x, ydata) {

  var myChart = echarts.getInstanceByDom(document.getElementById('gateMonitorGraph'));
  if (myChart === undefined) {
    var myChart = echarts.init(document.getElementById('gateMonitorGraph'));
  }

  var option = {
    title: {
      text: name,
      x: 'center',
      textStyle: {
        fontSize: 20,
      }
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{c}',
      textStyle: {
        fontSize: 24
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: x,
      axisLabel: {
        textStyle: {
          fontSize: 22
        }
      }
    },
    yAxis: {
      show: false,
      type: 'value',
      axisLabel: {
        textStyle: {
          fontSize: 22
        }
      }
    },
    label: {
      normal: {
        show: true,
        offset: [0, -10],
        textStyle: {
          fontSize: 32,
          color: '#000'
        }
      }

    },
    series: [
      {
        name: '',
        type: 'line',
        smooth: true,
        data: ydata,
        symbolSize: 20,
        lineStyle: {
          normal: {
            width: 4,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 2
          }
        },
        markLine: {
          data: [
            {
              type: 'average',
              name: '平均值'
            }
                ],
          label: {
            normal: {
              formatter: "{b}{c}",
              textStyle: {
                fontSize: 22,
                color: '#000'
              }
            }
          }
        }
        }
    ],
    animation: false
  };
  myChart.setOption(option);
}
